<template>
  <div class="full relative" id="EchartBox" ref="EchartBox">
    <!-- 筛选、全屏 icon -->
    <div class="w_50_p flex_row_end absolute top_0 right_5 z_999">
      <div class="w_25 h_25 mr_10" v-if="isShowFilterIcon">
        <img class="full cursor" src="../../assets/images/icon/filter.png" alt="" @click="showFilterBox = true">
      </div>

      <!-- 全屏 -->
      <div class="w_25 h_25" v-if="isShowFullIcon">
        <img class="full cursor" v-if="isFullscreen" src="../../assets/images/icon/qu-xiao-quan-ping.png" alt=""
          @click="fullScreen()">

        <img class="full cursor" v-if="!isFullscreen" src="../../assets/images/icon/quan-ping.png" alt=""
          @click="fullScreen()">
      </div>
    </div>

    <Echart :title="title" ref="chart" :path="path" :chartType="chartType" :chartData="chartData"
      :isShowUnit="isShowUnit" @emitChartParams="handleClickChart" />

    <!-- 筛选区 -->
    <div class="full absolute top_0 right_0" v-show="showFilterBox" @click="showFilterBox = false">
      <div class="w_40_p h_full absolute top_0 right_0 p_10 bgc_f6f6f6 z_999">
        <div class="w_full flex_row_between">
          <div class="w_85_p">
            <el-select class="w_full_i" v-model="filterVal" size="small" :placeholder="filterText" clearable filterable>
              <el-option v-for="(item, index) in filterList" :key="index" :label="item.name" :value="item.id"
                @click.native="handlefilter(item)">
              </el-option>
            </el-select>
          </div>

          <div class="w_15_p relative color_fff fw_bold cursor" @click="showFilterBox = false">
            <div class="w_20 h_20 absolute top_0 right_0">
              <img class="full cursor" src="../../assets/images/icon/cancel.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup lang="js">
import screenfull from 'screenfull'
import { ref, reactive, watch, onMounted, watchEffect } from 'vue'
import Echart from './echart.vue'

const props = defineProps({
  title: String,
  path: '',
  chartType: '',
  chartData: Object,
  filterText: '',
  filterId: '',
  filterList: Array,
  isShowUnit: true,
  isShowFilterIcon: null,
  isShowFullIcon: null
})

const emit = defineEmits(['clickChart', 'filterChartData'])

const isFullscreen = ref(false)
const showFilterBox = ref(false)
const filterVal = ref(null)

watch(() => props.filterId,
  (newVal, oldVal) => {
    filterVal.value = newVal
  },
  {
    immediate: true
  }
)
// 全屏
function fullScreen() {
  // const element = document.getElementById('EchartBox');//指定全屏区域元素

  let element = this.$refs.EchartBox
  // 先使用screenfull.enabled方法判断是否支持screenfull

  // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
  if (!screenfull.isEnabled) {
    this.$message({
      message: '浏览器不能全屏，安装其他版本试试',
      type: 'warning'
    })

    return false
  }

  isFullscreen.value = isFullscreen.value

  screenfull.request(element)

  // 调用 screenfull.toggle() 可以双向切换全屏与非全屏
  screenfull.toggle()
}

// 点击 图标
function handleClickChart(val) {
  emit('clickChart', val)
}

// 筛选
function handlefilter(item) {
  showFilterBox.value = false
  emit('filterChartData', item)
}
</script>

<style>
#EchartBox:-webkit-full-screen {
  padding: 50px;
  /* background-color: #001531 !important; */
  background: linear-gradient(to right, #5897eaa1, #2e6fac6f, #5897eaa1);
}

#EchartBox:-moz-full-screen {
  padding: 50px;
  /* background-color: #001531 !important; */
  background: linear-gradient(to right, #5897eaa1, #2e6fac6f, #5897eaa1);
}

#EchartBox:-ms-fullscreen {
  padding: 50px;
  /* background-color: #001531 !important; */
  background: linear-gradient(to right, #5897eaa1, #2e6fac6f, #5897eaa1);
}

#EchartBox:fullscreen {
  padding: 50px;
  /* background-color: #001531 !important; */
  background: linear-gradient(to right, #5897eaa1, #2e6fac6f, #5897eaa1);
}
</style>